<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>axios hello</title>
    <link rel="stylesheet" href="js/semantic/semantic.css">
    <script src="js/axios/axios.js"></script>
    <script src="js/jquery/jquery-3.6.0.js"></script>
    <style>.c1{
        width: 80%;
        margin:0 auto;
    }</style>
</head>

<body>
<div class="container">
    <div style="padding: 15px;text-align: left">
        <div class="ui buttons">
            <button class="ui positive button">提交</button>
            <div class="or"></div>
            <button class="ui primary button">取消</button>
        </div>
    </div>
    <h2 class="tt"></h2>
    <div style="padding: 15px;text-align: left">
        <button class="ui small button aget">aixos.get</button>
        <button class="ui small primary aget2 button">aixos.get</button>
        <input type="file" name="fs">
        <button class="ui small positive apost0 button">post formdata</button>
        <button class="ui red button apost">post</button>
        <button class="ui orange button apost2">post</button>
        <button class="ui yellow button aput">put</button>
        <button class="ui olive button adelete">delete</button>
        <button class="ui green button">Green</button>
        <button class="ui teal button">Teal</button>
        <button class="ui blue button">Blue</button>
        <button class="ui violet button">Violet</button>
        <button class="ui purple button">Purple</button>
        <button class="ui pink button">Pink</button>
        <button class="ui brown button">Brown</button>
        <button class="ui grey button">Grey</button>
        <button class="ui black button">Black</button>
    </div>
    <br>
    <i class="ae flag"></i>
    <i class="france flag"></i>
    <i class="myanmar flag"></i>
    <i class="icon qq"></i>
    <i class="icon wechat" style="color:green;font-size:60px"></i>
    <hr>
    <div class="c1">
        <table class="ui celled padded table">
            <thead>
            <tr><th class="single line">Evidence Rating</th>
                <th>Effect</th>
                <th>Efficacy</th>
                <th>Consensus</th>
                <th>Comments</th>
            </tr></thead>
            <tbody>
            <tr>
                <td>
                    <h2 class="ui center aligned header">A</h2>
                </td>
                <td class="single line">
                    Power Output
                </td>
                <td>
                    <div class="ui star rating" data-rating="3" data-max-rating="3"></div>
                </td>
                <td class="right aligned">
                    80% <br>
                    <a href="#">18 studies</a>
                </td>
                <td>Creatine supplementation is the reference compound for increasing muscular creatine levels; there is variability in this increase, however, with some nonresponders.</td>
            </tr>
            <tr>
                <td>
                    <h2 class="ui center aligned header">A</h2>
                </td>
                <td class="single line">
                    Weight
                </td>
                <td>
                    <div class="ui star rating" data-rating="3" data-max-rating="3"></div>
                </td>
                <td class="right aligned">
                    100% <br>
                    <a href="#">65 studies</a>
                </td>
                <td>Creatine is the reference compound for power improvement, with numbers from one meta-analysis to assess potency</td>
            </tr>
            </tbody>
            <tfoot>
            <tr><th colspan="5">
                <div class="ui right floated pagination small menu">
                    <a class="icon item">
                        <i class="left chevron icon"></i>
                    </a>
                    <a class="item">1</a>
                    <a class="item">2</a>
                    <a class="item">3</a>
                    <a class="item">4</a>
                    <a class="icon item">
                        <i class="right chevron icon"></i>
                    </a>
                </div>
            </th>
            </tr></tfoot>
        </table>

    </div>
</div>
<script src="js/semantic/semantic.js"></script>
<script>
    axios.defaults.baseURL = 'http://localhost/api/'

    //'Content-Type': 'application/json; charset=utf-8'
    //'Content-Type' : 'application/x-www-form-urlencoded'
    $(function(){

        $('.aput').click(function(){
            //axios.post 为请求表单
            let addr = '河南省郑州市'
            axios.put('t3','id=66&name=李强',{headers: {'Content-Type':'application/x-www-form-urlencoded'}}).then(res=>{
                alert(res.data.msg)
                //alert(JSON.stringify(res.data))
            }).catch(err=>{
                console.log(err)
            })
        })

        $('.adelete').click(function(){
            //axios.post 为请求表单
            let addr = '河南省郑州市'
            axios.delete('t3','id=66&name=李强',{headers: {'Content-Type':'application/x-www-form-urlencoded'}}).then(res=>{
                alert(res.data.msg)
                //alert(JSON.stringify(res.data))
            }).catch(err=>{
                console.log(err)
            })
        })



        $('.apost0').click(function(){
            let data = new FormData();//会自动请求头设置 'Content-Type': 'multipart/form-data'
            data.append('id','1234');
            data.append('name','李勇');
            let ff = document.querySelector("input[name='fs']");
            data.append('file',ff.files[0])

            axios.post('http://localhost/tt',data).then(res=>{
                alert(res.data.msg)
            }).catch(err=>{
                console.log(err)
            })
        })


        $('.apost2').click(function(){
            //axios.post 为请求表单
            let addr = '河南省郑州市'
            axios.post('t3','id=66&name=李强',{headers: {'Content-Type':'application/x-www-form-urlencoded'}}).then(res=>{
                alert(res.data.msg)
                //alert(JSON.stringify(res.data))
            }).catch(err=>{
                console.log(err)
            })
        })


        $('.apost').click(function(){

            //axios.post 为请求负载 服务器必须为 req.getReader().readLine()
            let addr = '河南省郑州市'
            axios.post('t3',{addr,id:1000,name:'李李李'}).then(res=>{
                alert(res.data)
            }).catch(err=>{
                console.log(err)
            })
        })


        $('.aget').click(function(){
            axios.get('t1').then(res=>{
                alert(res.data)
            }).catch(err=>{
                console.log(err)
            })
        })


        $('.aget2').click(function(){
            let id = 99
            let name = '张三丰'
            axios.get('t3',{params:{id,name:'jack'}}).then(res=>{
                alert(res.data.msg)
            }).catch(err=>{
                console.log(err)
            })
            /*
            axios.get('t3?id=66&name=李四').then(res=>{
                alert(res.data.msg)
            }).catch(err=>{
                console.log(err)
            })

             */
        })

        function tt(){
            //fetch().then().then().catch()
            axios.get('t1').then(res=>{
                $('.tt').html(res.data)
            }).catch(e=>console.log(e))
        }
        //tt()
        //setInterval(tt,1000)
    })
</script>
</body>
</html>
